<template>
    <!-- 新增弹出框 -->
    <el-dialog  v-bind:title="titleName"  :visible="Visible" :modal="true" :close-on-click-modal="false" width="40%" :show-close="true" :destroy-on-close="true"  :before-close="handleDialogClose">
        <el-form ref="form" :model="data" label-width="120px">
            <el-form-item label="所属站点">
                <el-select v-model="data.sys_type" @change="handleChange"  style="width:100%" placeholder="请选择">
                      <el-option 
                        v-for="item in dics.xtlx" 
                        :key="item.dict_code" 
                        :label="item.dict_name" 
                        :value="item.dict_code">
                      </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="栏目名称">
                <el-input style="width:100%" v-model="data.channel_name"></el-input>
            </el-form-item>
            <el-form-item label="栏目英文名称">
                <el-input v-model="data.channel_english"></el-input>
            </el-form-item>
            <el-form-item label="栏目所在目录">
                <el-input v-model="data.channel_path"></el-input>
            </el-form-item>
            <el-form-item label="内容页模板">
                <el-input v-model="data.channel_content_template"></el-input>
            </el-form-item>
            <el-form-item label="分页模板">
                <el-input v-model="data.channel_page_template"></el-input>
            </el-form-item>
            <el-form-item label="每页条数">
                <el-input v-model="data.channel_page_count"></el-input>
            </el-form-item>
            <el-form-item label="列表页模板">
                <el-input v-model="data.channel_list_template"></el-input>
            </el-form-item>
            <el-form-item label="列表页内容条数">
                <el-input v-model="data.channel_list_count"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <input type="radio" id="qiy" value="1" style="margin-left:20px" v-model="data.channel_state">
                <label for="qiy">启用</label>
                <input type="radio" id="jiny" value="0" style="margin-left:50px" v-model="data.channel_state">
                <label for="jiny">禁用</label>
            </el-form-item>
            <el-form-item label="上级栏目">
                <el-tree
                        :data="treeData"
                        show-checkbox
                        node-key="channel_pk"
                        ref="authTree"
                        @check-change="handleNodeClick"
                        :check-strictly="true"
                        :props="defaultProps">
                </el-tree>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="click_Close">关 闭</el-button>
                <el-button type="primary" @click="clicl_Save">保 存</el-button>
            </span>
    </el-dialog>
</template>

<script>
    export default {
        name: "edit",
        inject:['refresh'],
        props: {
            titleName: {
                type: String,
                default: '新增'
            },
            Visible: {
                type:Boolean
            },
            data: {
                channel_pk:'',
                channel_name:'',
                channel_parent:'',
                channel_english:'',
                channel_path: '',
                channel_content_template: '',
                channel_page_template:'',
                channel_page_count: '',
                channel_list_template: '',
                channel_list_count: '',
                channel_state: '',
            }
        },
        data(){
            return {
                dics: {},
                defaultProps: {
                    children: 'children',
                    label: 'channel_name'
                },
                treeData:[],
                xtlx:[],
                url:'',
                tree_url:'/cms/channel/list',
                url_xtlx: '/auth/dict/selectDict',
                url_save_edit: '/cms/channel/saveUpdate',
            }
        },
        //初始化
        created() {
            this.fetchTemplateData();
            this.getData();
        },
        methods:{
            selectIcon(val,obj) {
                this.channel_icon = val+obj.item;
            },
            //获取下拉中的text值
            handleChange(val){
                let obj = {};
                obj = this.dics.xtlx.find(function(item){
                    return item.dict_code === val
                });
                debugger;
                this.data.sys_name=obj.dict_name;
            },
            //下拉菜单
            //系统了类型下拉菜单
            fetchTemplateData(){
                this.dics.xtlx = this.$getDict('XTLX');//系统类型
            },
            //保存数据方法
            clicl_Save(){
                let ids = this.$refs.authTree.getCheckedKeys(); //获取id
                this.data.channel_parent = ids;
                this.$post(this.url_save_edit, this.data).then(res => {
                    this.$message({
                        type : res.code,
                        message: res.msg,
                    });
                    /*清空form表单*/
                    // this.form={brand_right:0};
                    this.Visible=false;
                    //刷新列表页的数据
                    this.refresh();
                })
            },
            //右上角关闭事件
            handleDialogClose(){
                this.click_Close();
            },
            //关闭窗口方法
            click_Close(){
                // this.Visible=false;
                this.refresh();
            },
            handleNodeClick(data) {
                console.log(this.$refs.authTree.getCheckedNodes());
            },
            //查询所有菜单
            getData(){
                this.$post(this.tree_url,this.form).then(res => {
                    if(res){
                        this.treeData= res;
                    }
                })
            },
        },
    }
</script>
<style>
    .el-input--suffix .el-input__inner {
        padding-right: 98px;
    }
</style>